/**
 * Created by xiangjiayu on 2017/6/26.
 * 新增订单
 */

import React from "react";
import {
    Anchor,
    Button,
    Checkbox,
    Col,
    DatePicker,
    Form,
    Icon,
    Input,
    Modal,
    Popconfirm,
    Radio,
    Row,
    Select,
    Steps,
    Table,
    Upload
} from "antd";
import data from "./data";

const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const FormItem = Form.Item;
const {MonthPicker, RangePicker} = DatePicker;//日历
const {Link} = Anchor;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const Step = Steps.Step;

const formItemLayout = {
  labelCol: {
    sm: {span: 3},
  },
  wrapperCol: {
    sm: {span: 5},
  },
};


export default class GoodsAdd extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
      //上传图片
      previewVisible: false,
      previewImage: '',
      fileList: [
        {
          uid: -1,
          name: 'xxx.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        }
      ],
      GoodsBan:false,
      GoodsTable:false,
      GoodsContent:false,
      GoodsStandard:false,

      GoodsBanAdd:false,
    };
  }
  //Steps
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }
  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }
  _SlipComplete() {
  }
  // 上传图片
  handleCancel = () => this.setState({previewVisible: false})
  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }
  handleChange = ({fileList}) => this.setState({fileList})

  //服务详情编辑
  //组织想document冒泡:
  stopPropagetion(e){
    e.nativeEvent.stopImmediatePropagation();
  }
  //大图
  handleBanner(e) {
    this.setState({
      GoodsBan: true,
      GoodsBanAdd: false,
      GoodsTable:false,
      GoodsContent:false,
      GoodsStandard:false,
    });

  }
  cancleBanner(){
    this.setState({
      GoodsBan: false,
    });
  }
  //新增
  handleBannerAdd(e) {
    this.setState({
      GoodsBanAdd: true,
      GoodsBan: false,
      GoodsTable:false,
      GoodsContent:false,
      GoodsStandard:false,
    });

  }
  cancleBannerAdd(){
    this.setState({
      GoodsBanAdd: false,
    });
  }
  //表格
  handleTable(e) {
    this.setState({
      GoodsBan: false,
      GoodsTable:true,
      GoodsContent:false,
      GoodsStandard:false,
    });

  }
  cancleTable(){
    this.setState({
      GoodsTable:false
    });
  }
  //服务内容
  handleContent(e) {
    this.setState({
      GoodsBan: false,
      GoodsTable:false,
      GoodsContent:true,
      GoodsStandard:false,
    });

  }
  cancleContent(){
    this.setState({
      GoodsContent:false
    });
  }
  //高级服务标准
  handleStandard(e) {
    this.setState({
      GoodsBan: false,
      GoodsTable:false,
      GoodsContent:false,
      GoodsStandard:true,
    });

  }
  cancleStandard(){
    this.setState({
      GoodsStandard:false
    });
  }
  componentDidMount(){
    let that = this;
    document.onclick=function (e) {
      that.cancleBanner();
      that.cancleTable();
      that.cancleContent();
      that.cancleStandard();
      that.cancleBannerAdd();
    }
  }
  render() {
    let that = this;
    const {current} = this.state;
    const steps = [
      {
        title: '商品信息',
        content: '1',
      }, {
        title: '详情介绍',
        content: '2',
      }
    ];
    // 步骤下面内容
    let stepsCont = null;
    if (this.state.current == 0) {
      stepsCont = that._step1();
    } else if (this.state.current == 1) {
      stepsCont = that._step2();
    }
    return (
      <div className="order-add">
        <div className="slip-title">
          <div className="slip-base">
            <div className="slip-left">
              <h4>新增</h4>
            </div>
          </div>
        </div>
        <div className="slip-body" id="Test">
          {/*步骤条*/}
          <div className="steps">
            <div className="steps-small">
              <Steps size="large" current={current}>
                {steps.map(item => <Step key={item.title} title={item.title}/>)}
              </Steps>
            </div>
          </div>
          <div className="steps-content">
            {stepsCont}
          </div>
        </div>
        <div className="slip-footer">
          <div className="slip-foot-center" id="slipFootCenter">
            {
              this.state.current > 0
              &&
              <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
                上一步
              </Button>
            }
            {
              this.state.current < steps.length - 1
              &&
              <Button type="primary" onClick={() => this.next()}>下一步</Button>
            }
            {
              this.state.current === steps.length - 1
              &&
              <Button type="primary" onClick={that._SlipComplete}>完成</Button>
            }
          </div>
        </div>
      </div>
    )
  }
  // 步骤条
  _step1()
  {
    const uploadButton = (
      <div>
        <Icon type="upload"/>
        <div className="ant-upload-text">上传</div>
      </div>
    );
    const {previewVisible, previewImage, fileList} = this.state;
    let priceList = data.priceListTable;
    let {sortedInfo, filteredInfo} = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: '销售区域',
        dataIndex: 'region',
        key: 'region',
        width:'60%',
        render: (value) => {
          return (
            <div className="btn-add-cont">
              <div className="btn-hover">
                <Button type="primary">{value}</Button>
                <div className="btn-hover-cont">
                  <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                  <a href="javascript:void(0)" className="btn-hover-link">删除</a>
                </div>
              </div>
              <Button className="ant-btn-info" type=""><Icon type="plus" />添加</Button>
            </div>
          )
        }
      },
      {
        title: '售价',
        dataIndex: 'state',
        key: 'state',
        width:'20%',
        className: 'ant-table-th-center',
        render: (value) => {
          return (
            <div>
              <Input className="wid-small" type="text"/>
              <span className="danwei">元/次</span>
            </div>
          )
        },
      },{
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        className: 'ant-table-th-center',
        width:'20%',
        render: () => {
          return (
            <div className="table-a-cont">
              <Popconfirm title="确定删除?">
                <a href="javascript:void(0)">删除</a>
              </Popconfirm>
            </div>
          )
        },
      }
    ];
    const pagination = {
       //total: this.state.tDate.length,
      total: 50,
      showSizeChanger: false,
      defaultPageSize:5,
    }
    return (
      <div>
        {/*基础信息*/}
        <div className="slip-cont">
          <div className="slip-cont-title">
            <span className="span-bdw">基础信息</span>
          </div>
          <div className="slip-cont-b">
            <div className="add-cont">
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label className="ant-form-item-required"><span className="span-left">商品名称</span></label>
                  </div>
                </Col>
                <Col span={5}>
                  <div className="ant-form-item-control">
                    <Input size="large" placeholder="请输入商品名称"/>
                  </div>
                  <p className="tips-p">10个字以内</p>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={3} className="text-r">
                  <div className="ant-form-item-label">
                    <label><span className="span-left">商品图片</span></label>
                  </div>
                </Col>
                <Col span={16}>
                  <div className="ant-form-item-control">
                    <div className="clearfix">
                      <Upload
                        action=""
                        listType="picture-card"
                        fileList={fileList}
                        onPreview={this.handlePreview}
                        onChange={this.handleChange}
                      >
                        {fileList.length >= 1 ? null : uploadButton}
                      </Upload>
                      <Modal visible={previewVisible}
                             footer={null}
                             onCancel={this.handleCancel}
                      >
                        <img alt="example" style={{width: '100%'}} src={previewImage}/>
                      </Modal>
                    </div>
                    <p className="col-grey">图片会在移动端商品列表等页面展示，建议尺寸160*120</p>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
        {/*区域价格设置*/}
        <div className="slip-cont">
          <div className="slip-cont-title">
            <span className="span-bdw">区域价格设置</span>
            <span className="slip-bdt">
              <Button type="primary">添加</Button>
            </span>
          </div>
          <div className="slip-cont-b">
            {/*表格*/}
            <Table columns={columns} bordered dataSource={priceList.toJS()} pagination={pagination} />
          </div>
        </div>
      </div>
    )
  }
  _step2()
  {
    const dataSource = [
      {
        key: '1',
        level: '普通月嫂',
        price: '6000-8000/月'
      }, {
        key: '2',
        level: '普通月嫂',
        price: '6000-8000/月'
      }
    ];
    const columns = [
      {
        title: '月嫂等级',
        dataIndex: 'level',
        key: 'level',
        className: 'ant-table-th-center',
      }, {
        title: '服务价格',
        dataIndex: 'price',
        key: 'price',
        className: 'ant-table-th-center',
      }
    ];
    const dataSource_right = [
      {
        key: '1',
        level: <Input className="wid-small"/>,
        price: <Input className="wid-small"/>
      }, {
        key: '2',
        level: <Input className="wid-small"/>,
        price: <Input className="wid-small"/>
      }
    ];
    const columns_right = [
      {
        title: '月嫂等级',
        dataIndex: 'level',
        key: 'level',
        className: 'ant-table-th-center',
      }, {
        title: '服务价格',
        dataIndex: 'price',
        key: 'price',
        className: 'ant-table-th-center',
      }
    ];
    return (
      <div>
        {/*详情介绍*/}
        <div className="slip-cont">
          <div className="slip-cont-b">
            <div className="goods">
              <div className="goods-title"><h4>服务详情</h4></div>
              <div className="goods-body">
                {/*服务banner*/}
                <div className="goods-cont" onClick={(e) => this.stopPropagetion(e)}>
                  <div className="goods-left goods-ban">
                    <div className="goods-cont-body"><img src="https://wxt.sinaimg.cn/thumb300/63885668ly1fl1fzmacucj23402buwri.jpg" alt=""/></div>
                    <div className={this.state.GoodsBan ? 'goods-hover hover' : 'goods-hover'}>
                      <div className="btn-link-edit">
                        <a href="javascript:void(0)" onClick={(e) => this.handleBannerAdd(e)}>添加</a>
                        <a href="javascript:void(0)">删除</a>
                        <a href="javascript:void(0)">上移</a>
                        <a href="javascript:void(0)">下移</a>
                      </div>
                      <div className="btn-cont-edit">
                        <a href="javascript:void(0)" className="btn-edit" onClick={(e) => this.handleBanner(e)}>编辑</a>
                      </div>
                    </div>
                  </div>
                  <div className={this.state.GoodsBanAdd ? 'goods-right animated fadeInRight' : 'goods-right animated fadeOutRight dis-n'}>
                    <h4>添加模块</h4>
                    <div className="goods-right-template">
                      <Row gutter={16}>
                        <Col span={6}><Button className="template-link ant-btn-info">大图</Button></Col>
                        <Col span={6}><Button className="template-link ant-btn-info">小图</Button></Col>
                        <Col span={6}><Button className="template-link ant-btn-info">表格</Button></Col>
                        <Col span={6}><Button className="template-link ant-btn-info">文字</Button></Col>
                      </Row>
                    </div>
                  </div>
                  <div className={this.state.GoodsBan ? 'goods-right animated fadeInRight' : 'goods-right animated fadeOutRight dis-n'}>
                    <h4>大图设置</h4>
                    <div className="goods-right-banner">
                      <div className="banner-img">
                        <img className="img-scale" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510914906&di=4e1db58a706eead7e2b8f005c18a298a&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4.a0bi.com%2Fupload%2Fttq%2F20170404%2F1491293987423.jpg" alt=""/>
                        <div className="upfile">
                          <a className="upfile-btn">
                            <input type="file"/>
                            上传
                          </a>
                        </div>
                      </div>
                    </div>
                    <p className="tips-p">图片建议尺寸：750*420</p>
                  </div>
                </div>
                {/*服务价格*/}
                <div className="goods-cont" onClick={(e) => this.stopPropagetion(e)}>
                  <div className="goods-left">
                    <div className="goods-cont-title"><span className="name">服务价格</span></div>
                    <div className="goods-cont-body">
                      {/*表格*/}
                      <Table dataSource={dataSource} columns={columns} pagination={false}  bordered/>
                    </div>
                    <div className={this.state.GoodsTable ? 'goods-hover hover' : 'goods-hover'}>
                      <div className="btn-link-edit">
                        <a href="javascript:void(0)">添加</a>
                        <a href="javascript:void(0)">删除</a>
                        <a href="javascript:void(0)">上移</a>
                        <a href="javascript:void(0)">下移</a>
                      </div>
                      <div className="btn-cont-edit">
                        <a href="javascript:void(0)" className="btn-edit" onClick={(e) => this.handleTable(e)}>编辑</a>
                      </div>
                    </div>
                  </div>
                  <div className={this.state.GoodsTable ? 'goods-right animated fadeInRight' : 'goods-right animated fadeOutRight dis-n'}>
                    <h4>表格设置</h4>
                    <div className="add-cont">
                      <Row gutter={8}>
                        <Col span={4} className="text-r">
                          <div className="ant-form-item-label">
                            <label><span className="span-left">标题</span></label>
                          </div>
                        </Col>
                        <Col span={10}>
                          <Input size="large" placeholder="请输入标题"/>
                        </Col>
                        <Col span={10}>
                          <div className="error-tip"><Icon type="minus-circle-o"/>错误提示</div>
                        </Col>
                      </Row>
                      <Row gutter={8}>
                        <Col span={4} className="text-r">
                          <div className="ant-form-item-label">
                            <label><span className="span-left">列表</span></label>
                          </div>
                        </Col>
                        <Col span={20}>
                          {/*表格*/}
                          <Table dataSource={dataSource_right} columns={columns_right} pagination={false}  bordered size="middle"/>
                          <div className="foot-add"><Button type="primary" icon="plus">新增一行</Button></div>
                        </Col>
                      </Row>
                    </div>
                  </div>
                </div>
                {/*服务内容*/}
                <div className="goods-cont" onClick={(e) => this.stopPropagetion(e)}>
                  <div className="goods-left">
                    <div className="goods-cont-title"><span className="name">服务内容</span></div>
                    <div className="goods-cont-body">
                      <div className="goods-service-p">
                        <p>基本的家庭保洁服务，由扫、擦、洗等各种作业组成，服务内容包括清洁地面、台面、厨房、卫生间、整理房间、清除垃圾等，通过日常保洁可以减少物业装饰材料的自然损坏和人为磨损，延长物业的使用年限，保持物业美观的效果，按小时结算。</p>
                        <div className="empty">
                          <p>您没有填写服务内容</p>
                        </div>
                      </div>
                    </div>
                    <div className={this.state.GoodsContent ? 'goods-hover hover' : 'goods-hover'}>
                      <div className="btn-link-edit">
                        <a href="javascript:void(0)">添加</a>
                        <a href="javascript:void(0)">删除</a>
                        <a href="javascript:void(0)">上移</a>
                        <a href="javascript:void(0)">下移</a>
                      </div>
                      <div className="btn-cont-edit">
                        <a href="javascript:void(0)" className="btn-edit" onClick={(e) => this.handleContent(e)}>编辑</a>
                      </div>
                    </div>
                  </div>
                  <div className={this.state.GoodsContent ? 'goods-right animated fadeInRight' : 'goods-right animated fadeOutRight dis-n'}>
                    <h4>文字设置</h4>
                    <div className="add-cont">
                      <Row gutter={8}>
                        <Col span={4} className="text-r">
                          <div className="ant-form-item-label">
                            <label><span className="span-left">标题</span></label>
                          </div>
                        </Col>
                        <Col span={10}>
                          <Input size="large" placeholder="请输入标题"/>
                        </Col>
                        <Col span={10}>
                          <div className="error-tip"><Icon type="minus-circle-o"/>错误提示</div>
                        </Col>
                      </Row>
                      <Row gutter={8}>
                        <Col span={4} className="text-r">
                          <div className="ant-form-item-label">
                            <label><span className="span-left">内容</span></label>
                          </div>
                        </Col>
                        <Col span={20}>
                          <Input type="textarea" rows="5" size="large" placeholder="请输入内容"/>
                        </Col>
                      </Row>
                    </div>
                  </div>
                </div>
                {/*高级服务标准*/}
                <div className="goods-cont"  onClick={(e) => this.stopPropagetion(e)}>
                  <div className="goods-left">
                    <div className="goods-cont-title"><span className="name">高级服务标准</span></div>
                    <div className="goods-cont-body">
                      <div className="goods-service-pic">
                        <Row gutter={16}>
                          <Col span={12}>
                            <div className="goods-pic"><img className="img-scale" src="https://wxt.sinaimg.cn/thumb300/63885668ly1fl1fzmacucj23402buwri.jpg" alt=""/></div>
                            <p className="name">健脾生血健脾生血健脾生血健脾生血健脾生血健脾生血</p>
                          </Col>
                          <Col span={12}>
                            <div className="goods-pic"><img className="img-scale" src="https://pic.qianmi.com/ejz/ejz2.0/img/product/76-2.jpg" alt=""/></div>
                            <p className="name">健脾生血</p>
                          </Col>
                          <Col span={12}>
                            <div className="goods-pic"><img className="img-scale" src="https://pic.qianmi.com/ejz/ejz2.0/img/product/76-2.jpg" alt=""/></div>
                            <p className="name">健脾生血</p>
                          </Col>
                          <Col span={12}>
                            <div className="goods-pic"><img className="img-scale" src="https://img.1000.com/ehome/dev/0003370/1508483646522.jpg" alt=""/></div>
                            <p className="name">健脾生血</p>
                          </Col>
                        </Row>
                      </div>
                    </div>
                    <div className={this.state.GoodsStandard ? 'goods-hover hover' : 'goods-hover'}>
                      <div className="btn-link-edit">
                        <a href="javascript:void(0)" onClick={(e) => this.handleBannerAdd(e)}>添加</a>
                        <a href="javascript:void(0)">删除</a>
                        <a href="javascript:void(0)">上移</a>
                        <a href="javascript:void(0)">下移</a>
                      </div>
                      <div className="btn-cont-edit">
                        <a href="javascript:void(0)" className="btn-edit" onClick={(e) => this.handleStandard(e)}>编辑</a>
                      </div>
                    </div>
                  </div>
                  <div className={this.state.GoodsBanAdd ? 'goods-right-add animated fadeInRight' : 'goods-right-add animated fadeOutRight dis-n'}>
                    <h4>添加模块</h4>
                    <div className="goods-right-template">
                      <Row gutter={16}>
                        <Col span={6}><Button className="template-link ant-btn-info">大图</Button></Col>
                        <Col span={6}><Button className="template-link ant-btn-info">小图</Button></Col>
                        <Col span={6}><Button className="template-link ant-btn-info">表格</Button></Col>
                        <Col span={6}><Button className="template-link ant-btn-info">文字</Button></Col>
                      </Row>
                    </div>
                  </div>
                  <div className={this.state.GoodsStandard ? 'goods-right goods-right-pr0 animated fadeInRight' : 'goods-right  goods-right-pr0 animated fadeOutRight dis-n'}>
                    <h4>小图设置</h4>
                    <div className="add-cont goods-xiaotu-height">
                      <div className="goods-right-standard">
                        <span className="icon-close"><Icon type="close-square" /></span>
                        <Row gutter={8}>
                          <Col span={4} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">标题</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <Input size="large" placeholder="请输入标题"/>
                          </Col>
                        </Row>
                        <Row gutter={8}>
                          <Col span={4} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">图片一</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <Input size="large" placeholder="请输入图片一标题"/>
                          </Col>
                        </Row>
                        <Row gutter={8}>
                          <Col span={4}></Col>
                          <Col span={10}>
                            <div className="goods-right-banner goods-right-xiaotu">
                              <div className="banner-img">
                                <img className="img-scale" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510914906&di=4e1db58a706eead7e2b8f005c18a298a&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4.a0bi.com%2Fupload%2Fttq%2F20170404%2F1491293987423.jpg" alt=""/>
                                <div className="upfile">
                                  <a className="upfile-btn">
                                    <input type="file"/>
                                    上传
                                  </a>
                                </div>
                              </div>
                            </div>
                            <p className="tips-p">图片建议尺寸：218*160</p>
                          </Col>
                        </Row>
                      </div>
                      <div className="goods-right-standard">
                        <span className="icon-close"><Icon type="close-square" /></span>
                        <Row gutter={8}>
                          <Col span={4} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">标题</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <Input size="large" placeholder="请输入标题"/>
                          </Col>
                        </Row>
                        <Row gutter={8}>
                          <Col span={4} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">图片二</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <Input size="large" placeholder="请输入图片一标题"/>
                          </Col>
                        </Row>
                        <Row gutter={8}>
                          <Col span={4}></Col>
                          <Col span={10}>
                            <div className="goods-right-banner goods-right-xiaotu">
                              <div className="banner-img">
                                <img className="img-scale" src="https://img.1000.com/ehome/dev/0003370/1508483646522.jpg" alt=""/>
                                <div className="upfile">
                                  <a className="upfile-btn">
                                    <input type="file"/>
                                    上传
                                  </a>
                                </div>
                              </div>
                            </div>
                            <p className="tips-p">图片建议尺寸：218*160</p>
                          </Col>
                        </Row>
                      </div>
                      <div className="goods-right-standard">
                        <span className="icon-close"><Icon type="close-square" /></span>
                        <Row gutter={8}>
                          <Col span={4} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">标题</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <Input size="large" placeholder="请输入标题"/>
                          </Col>
                        </Row>
                        <Row gutter={8}>
                          <Col span={4} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">图片三</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <Input size="large" placeholder="请输入图片一标题"/>
                          </Col>
                        </Row>
                        <Row gutter={8}>
                          <Col span={4}></Col>
                          <Col span={10}>
                            <div className="goods-right-banner goods-right-xiaotu">
                              <div className="banner-img">
                                <img className="img-scale" src="https://pic.qianmi.com/ejz/ejz2.0/img/product/76-2.jpg" alt=""/>
                                <div className="upfile">
                                  <a className="upfile-btn">
                                    <input type="file"/>
                                    上传
                                  </a>
                                </div>
                              </div>
                            </div>
                            <p className="tips-p">图片建议尺寸：218*160</p>
                          </Col>
                        </Row>
                      </div>
                      <div className="goods-right-standard">
                        <span className="icon-close"><Icon type="close-square" /></span>
                        <Row gutter={8}>
                          <Col span={4} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">标题</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <Input size="large" placeholder="请输入标题"/>
                          </Col>
                        </Row>
                        <Row gutter={8}>
                          <Col span={4} className="text-r">
                            <div className="ant-form-item-label">
                              <label><span className="span-left">图片四</span></label>
                            </div>
                          </Col>
                          <Col span={10}>
                            <Input size="large" placeholder="请输入图片一标题"/>
                          </Col>
                        </Row>
                        <Row gutter={8}>
                          <Col span={4}></Col>
                          <Col span={10}>
                            <div className="goods-right-banner goods-right-xiaotu">
                              <div className="banner-img">
                                <img className="img-scale" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510914906&di=4e1db58a706eead7e2b8f005c18a298a&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4.a0bi.com%2Fupload%2Fttq%2F20170404%2F1491293987423.jpg" alt=""/>
                                <div className="upfile">
                                  <a className="upfile-btn">
                                    <input type="file"/>
                                    上传
                                  </a>
                                </div>
                              </div>
                            </div>
                            <p className="tips-p">图片建议尺寸：218*160</p>
                          </Col>
                        </Row>
                      </div>
                      <Row gutter={8}>
                        <Col span={4}></Col>
                        <Col span={10}>
                          <Button type="primary"><Icon type="plus" />添加</Button>
                        </Col>
                      </Row>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
